<template>
    <view class="wrap">
        <view class="header">
            <img
            class="headerBg"
            src="https://ainengli.hzjrsw.com/jkhx/foodBg.png"
            alt=""
            />
        </view>
        <view class="content">
            <view class="title">菜谱内容</view>
            <view v-if="state.contentObj.breakfast.length > 0" class="meal">
                <view class="meal_title">早餐</view>
                <view class="meal_list">
                    <view v-for="(item, index) of state.contentObj.breakfast" :key="index" class="tag">{{ item }}</view>
                </view>
            </view>
            <view v-if="state.contentObj.breakfastPlus.length > 0" class="meal">
                <view class="meal_title">早加餐</view>
                <view class="meal_list">
                    <view v-for="(item, index) of state.contentObj.breakfastPlus" :key="index" class="tag add_tag">{{ item }}</view>
                </view>
            </view>
            <view v-if="state.contentObj.lunch.length > 0" class="meal">
                <view class="meal_title">午餐</view>
                <view class="meal_list">
                    <view v-for="(item, index) of state.contentObj.lunch" :key="index" class="tag">{{ item }}</view>
                </view>
            </view>
            <view v-if="state.contentObj.lunchPlus.length > 0" class="meal">
                <view class="meal_title">午加餐</view>
                <view class="meal_list">
                    <view v-for="(item, index) of state.contentObj.lunchPlus" :key="index" class="tag add_tag">{{ item }}</view>
                </view>
            </view>
            <view v-if="state.contentObj.dinner.length > 0" class="meal">
                <view class="meal_title">晚餐</view>
                <view class="meal_list">
                    <view v-for="(item, index) of state.contentObj.dinner" :key="index" class="tag">{{ item }}</view>
                </view>
            </view>
            <view v-if="state.contentObj.dinnerPlus.length > 0" class="meal">
                <view class="meal_title">晚加餐</view>
                <view class="meal_list">
                    <view v-for="(item, index) of state.contentObj.dinnerPlus" :key="index" class="tag add_tag">{{ item }}</view>
                </view>
            </view>
        </view>
        <view @tap="recordFood" class="btn">
            <view class="wraps">
                <text class="name">记录饮食</text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { readDetail, taskDetailInfo } from '@/api/hmm'

const state = reactive({
    id: '',
    contentObj: {},
    userInfo: {},
    getUserId: '',
})

onLoad((options) => {
  state.id = options ? options.id : ''
})
onShow(() => {
  state.userInfo = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  state.getUserId = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).userId
    : ''
  init()
})
const init = () => {
  uni.showLoading({
    title: '加载中'
  })

  taskDetailInfo(state.id).then((res) => {
    uni.hideLoading()
    if (res.code == 0) {
      state.contentObj = JSON.parse(res.data.itemContent)
    }
  })
}
const recordFood = () => {
    console.log('记录影视')
    uni.navigateTo({
      url: '/packA/pages/dailyFood/index'
    })
}

</script>

<style lang="scss" scoped>
.wrap {
    min-height: calc(100vh - 48rpx);
    overflow: auto;
    background: #f3f7f8;
    padding-bottom: calc(184rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(184rpx + env(safe-area-inset-bottom));
    .header {
        height: 328rpx;
        position: relative;
        .headerBg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
        }
    }
    .content {
        background: #FFFFFF;
        position: relative;
        z-index: 2;
        border-radius: 16rpx;
        padding: 32rpx;
        margin: -124rpx 32rpx 0;
        .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #222222;
            margin-bottom: 24rpx;
        }
        .meal {
            border-bottom: 1rpx solid #e5e6eb;
            margin-bottom: 24rpx;
            padding-bottom: 24rpx;
            &:last-child {
                margin: 0;
            }
            .meal_title {
                font-weight: 500;
                font-size: 30rpx;
                color: #222222;
                margin-bottom: 16rpx;
            }
            .meal_list {
                display: flex;
                justify-content: flex-start;
                flex-wrap: wrap;
                gap: 16rpx;
                .tag {
                    padding: 8rpx 32rpx;
                    background: rgba(0,209,182,0.05);
                    border-radius: 4rpx;
                    border: 1rpx solid #00D1B6;
                    font-weight: 400;
                    font-size: 30rpx;
                    color: #00D1B6;
                }
                .add_tag {
                    background: rgba(92,142,255,0.05);
                    border: 1rpx solid #5C8EFF;
                    color: #5C8EFF;
                }
            }
        }
    }
    .btn {
        position: fixed;
        z-index: 3;
        width: 100%;
        background: #fff;
        left: 0;
        bottom: 0;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        .wraps {
            margin: 22rpx 32rpx;
            border-radius: 44rpx;
            background: #00d1b6;
            border-radius: 44rpx;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            .name {
                display: inline-block;
                vertical-align: middle;
                font-size: 32rpx;
                color: #fff;
                font-weight: 700;
            }
            .img {
                display: inline-block;
                vertical-align: middle;
                width: 40rpx;
                height: 40rpx;
            }
        }
    }
}
</style>
